import React from 'react';

import { useAudioRecorder } from '../../hooks/useAudio/index';
import { AudioControls, AudioFileList } from '../AudioRecorder/index';

interface TranscriptionTabProps {
	infoList: string;
	displayedText: string;
	onAudioResult: (result: string) => void;
}

const BtnList = [
	{ title: '全文转录', type: 1 },
	{ title: '智能纪要提取', type: 2 },
	{ title: '在线编辑', type: 3 }
];

const TranscriptionTab: React.FC<TranscriptionTabProps> = ({
	infoList,
	displayedText,
	onAudioResult
}) => {
	const audioRecorder = useAudioRecorder();

	// 处理录音开始
	const handleStartRecording = async () => {
		try {
			const stopFn = await audioRecorder.handleRecordVoice(onAudioResult);
			if (stopFn) {
				audioRecorder.setStopRecording(() => stopFn);
				audioRecorder.setIsRecording(true);
			}
		} catch (error) {
			console.error('录音控制错误:', error);
			audioRecorder.setError('录音控制失败');
			audioRecorder.setIsRecording(false);
		}
	};

	// 处理录音停止
	const handleStopRecording = () => {
		if (audioRecorder.stopRecording) {
			audioRecorder.stopRecording();
		}
		audioRecorder.setIsRecording(false);
	};

	// 处理文件上传
	const handleFileUpload = () => {
		audioRecorder.handleUploadVoice();
	};

	// 处理文件改变
	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		audioRecorder.handleFileChange(e, onAudioResult);
	};

	// 处理删除文件
	const handleRemoveFile = (file: File) => {
		audioRecorder.setFileList(
			audioRecorder.fileList.filter(vv => vv.lastModified !== file.lastModified)
		);
		if (audioRecorder.playInfo.localPlay) {
			audioRecorder.pauseVoice();
			audioRecorder.setPlayInfo({
				...audioRecorder.playInfo,
				localPlay: false
			});
		}
	};

	return (
		<div className="flex-col flex-1 px-8 relative">
			{/* 隐藏的文件输入 */}
			<input
				type="file"
				accept="audio/*"
				ref={audioRecorder.fileInputRef}
				onChange={handleFileChange}
				style={{ display: 'none' }}
			/>

			<div className="w-full text-5 pb-1 pt-8">请上传音频文件文件</div>

			{/* 音频文件列表 */}
			<AudioFileList
				fileList={audioRecorder.fileList}
				recordFile={audioRecorder.recordFile}
				playInfo={audioRecorder.playInfo}
				onPlayUploadRecord={audioRecorder.handlePlayUploadRecord}
				onPlayRecord={audioRecorder.handlePlayRecord}
				onRemoveFile={handleRemoveFile}
				onRemoveRecord={audioRecorder.handleRemoveRecord}
				onPauseVoice={audioRecorder.pauseVoice}
			/>

			{/* 功能按钮 */}
			{infoList.length === 0 && (
				<>
					<div className="color-[#333] text-6 pt-6">您希望：</div>
					<div className="w-full grid grid-cols-4 gap-4 pt-6">
						{BtnList.map((item, index) => {
							return (
								<div
									key={index}
									className="flex-center text-3.5 rounded-1 col-span-1 flex flex-col items-center bg-[#EDF6FF] color-[#56585B] h-10"
								>
									{item.title}
								</div>
							);
						})}
					</div>
				</>
			)}

			{/* 转录结果显示 */}
			<div className={`content ${displayedText ? 'h-[420px]' : 'flex-1'} py-6 overflow-auto`}>
				{displayedText && (
					<>
						<div className="text-4.5 color-[#333] lh-8">{`转录结果：`}</div>
						<div className="bg-gray-100 p-4 rounded-lg min-h-[100px]">{displayedText}</div>
					</>
				)}
			</div>

			{/* 音频控制按钮 */}
			<AudioControls
				isRecording={audioRecorder.isRecording}
				onStartRecording={handleStartRecording}
				onStopRecording={handleStopRecording}
				onUploadFile={handleFileUpload}
			/>
		</div>
	);
};

export default TranscriptionTab;
